<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="topPic.coverImgUrl" alt="" />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <div class="title">
         {{topPic.name}}
        </div>
        <div class="info">
          {{topPic.description}}
        </div>
      </div>
      <img src="@/assets/listCover.jpg" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" :class="{active:item===tag}" v-for="(item,index) in topArr" :key="index" @click="changeData(item,index)">{{item}}</span>


      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item,index) in playArr" :key="index" @click="sendList(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="20"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getJinpin,getJPMusic } from "@/api/comment.js"
export default {
  name: 'recommend',
  data() {
    return {
      // 接收表头的数据
      index:0,
      // 总条数
      total:0,
      // 页码
      page:1,
      tag:'全部',
      // 封面数据
      topPic:{},
      // 表头的数据
      topArr:['全部','欧美','华语','流行','说唱','摇滚','民谣','电子','轻音乐','影视原声','怀旧','ACG','治愈','旅行'],
      // 播放列表的数据
      playArr:[],

    };
  },
  created() {
    this.getTopPic()
    //获取对应的音乐列表
    this.getJPMusic()
  },
  methods: {
    //点击进入到歌单的区域
   sendList(id){
      this.$router.push(`/playlist?id=${id}`)
    },
    // 改变对应的数组
    changeData(id,item){
      this.tag=id
      // 页码回到第一页
      this.page=1
      // 改变表头的数据
      // 重新发送请求渲染页面
      this.getJPMusic()

    },
    //获取对应的音乐
    async getJPMusic(){
      const {data}=await getJPMusic({
        limit:20,
        offset:(this.page-1)*20,
        cat:this.tag
      })
      console.log(data);

      this.playArr=data.playlists
      this.total=data.total
    },
    // 获取当爱你的头部列表
    async getTopPic(){
      const {data}=await getJinpin({
        limit:10,
        tag:this.tag
      })
      this.topPic=data.playlists[this.index]

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page=val
      // 调用接口
       this.getJPMusic()

    }
  }
};
</script>

<style >

</style>
